<template>
    <div>
        <el-row style="height: 100%">
            <el-col :span="left" class="placeholder">
            </el-col>
            <el-col :span="middle" class="cron">
                <el-form label-width="180px" :model="cycleInfo" ref="cycleRef" :rules="rules"
                    :validate-on-rule-change="false">
                    <el-form-item label="执行器组" prop="jobGroup" @submit.native.prevent>
                        <el-select v-model="cycleInfo.jobGroup" placeholder="请选择执行器组" class="input-auto-resize"
                            popper-class="forbid-select">
                            <el-option v-for="item in provider" :key="item.label" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="路由策略" prop="executorRouteStrategy">
                        <el-select v-model="cycleInfo.executorRouteStrategy" placeholder="请选择路由策略"
                            class="input-auto-resize" popper-class="forbid-select">
                            <el-option v-for="item in routeStrategy" :key="item.label" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="阻塞处理策略" prop="executorBlockStrategy">
                        <el-radio-group v-model="cycleInfo.executorBlockStrategy">
                            <el-radio value="SERIAL_EXECUTION">单机串行</el-radio>
                            <el-radio value="DISCARD_LATER">丢弃后续调度</el-radio>
                            <el-radio value="COVER_EARLY">覆盖之前调度</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="调度过期策略" prop="misfireStrategy">
                        <el-radio-group v-model="cycleInfo.misfireStrategy">
                            <el-radio value="DO_NOTHING">忽略所有</el-radio>
                            <el-radio value="FIRE_ONCE_NOW">立即执行一次</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="重试次数" prop="executorFailRetryCount">
                        <el-input-number v-model="cycleInfo.executorFailRetryCount" :step="1" :min="0" :max="5"
                            class="input-auto-resize" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="超时时间(s)" prop="executorTimeout">
                        <el-input-number v-model="cycleInfo.executorTimeout" :step="10" :min="0"
                            class="input-auto-resize" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="执行方式" prop="execType">
                        <el-switch v-model="cycleInfo.triggerStatus" class="forbid-select fit-auto-resize"
                            active-text="自动" inactive-text="手动" :active-value="1" :inactive-value="0" inline-prompt />
                    </el-form-item>
                    <transition name="animate__animated " enter-active-class="animate__zoomIn animate__fast"
                        leave-active-class="animate__zoomOut animate__fast">
                        <el-form-item label="cron表达式" prop="scheduleConf" v-show="cycleInfo.triggerStatus === 1">
                            <tooltip v-model="cycleInfo.scheduleConf" class="input-auto-resize" border>
                                <template #suffix>
                                    <el-icon class="el-input__icon" @click="cronDialog = true">
                                        <component :is="getIcon('search')" />
                                    </el-icon>
                                </template>
                            </tooltip>
                        </el-form-item>
                    </transition>
                </el-form>
            </el-col>
            <el-col :span="right" class="forbid-select" style="padding-left: 5%" v-if="right !== 0">
                <p>所属工作流</p>
                <div v-if="dependWorkflow.length > 0">
                    <el-row style="padding-top: 10px" v-for="item in dependWorkflow" :key="item[0]">
                        <el-tag @dblclick="openWorkflow(item)" class="fit-auto-resize">{{ item[1] }}</el-tag>
                    </el-row>
                </div>
                <div v-else>
                    <span>无</span>
                </div>
            </el-col>
        </el-row>

        <cron v-model="cronDialog" v-model:value="cycleInfo.scheduleConf" />
    </div>
</template>
<script setup>
import { getIcon } from "@/utils/tools"
import router from "@/router"

const props = defineProps({
    left: {
        type: Number,
        default: 4
    },
    middle: {
        type: Number,
        default: 12
    },
    right: {
        type: Number,
        default: 8
    },
    type: {
        type: String,
        default: ""
    }
})

let cycleInfo = $ref({
    executorRouteStrategy: "FAILOVER",
    jobGroup: 1,
    executorBlockStrategy: "SERIAL_EXECUTION",
    misfireStrategy: "DO_NOTHING",
    executorFailRetryCount: 0,
    executorTimeout: 0,
    scheduleConf: "",
    triggerStatus: 0
})
let cronDialog = $ref(false)
let provider = $ref([])
let dependWorkflow = $ref([])
let routeStrategy = [
    // {value: "FIRST", label: "第一个"},
    // {value: "LAST", label: "最后一个"},
    { value: "ROUND", label: "轮询" },
    { value: "RANDOM", label: "随机" },
    { value: "CONSISTENT_HASH", label: "一致性HASH" },
    // {value: "LEAST_FREQUENTLY_USED", label: "最不经常使用"},
    // {value: "LEAST_RECENTLY_USED", label: "最近最久未使用"},
    { value: "FAILOVER", label: "故障转移" },
    { value: "BUSYOVER", label: "忙碌转移" },
    { value: "SHARDING_BROADCAST", label: "分片广播" },]

const rules = $computed(() => {
    if (cycleInfo.triggerStatus) {
        return { scheduleConf: { required: true, message: 'cron表达式不能为空', trigger: ['change'] } }
    } else {
        return { scheduleConf: {} }
    }
})

const openWorkflow = (seqName) => {
    if (Array.isArray(seqName) && seqName.length === 2) {
        let index = '/task/workflow?id=' + seqName[0] + '&type=workflow&title=' + seqName[1];
        router.push(index);
    }
}

const cycleRef = $ref(null)

const validate = () => {
    return cycleRef.validate().catch((() => {
        return false
    }));
}
const save = () => {
    return cycleInfo
}
const fill = (_cycleInfo, _provider, _dependWorkflow) => {
    if (_cycleInfo) {
        cycleInfo = _cycleInfo
    }
    if (_provider) {
        provider = _provider
    }
    if (_dependWorkflow) {
        dependWorkflow = _dependWorkflow;
    }
}

defineExpose({ validate, save, fill })

</script>
<style scoped>
:deep(.el-dialog__body) {
    height: 245px;
    padding: 10px;
}

:deep(.el-switch) {
    height: 33px;
}

:deep(.el-input-number.is-controls-right[class*=small] [class*=decrease]),
:deep(.el-input-number.is-controls-right[class*=small] [class*=increase]) {
    display: none;
}

:deep(.el-input-number:hover.is-controls-right[class*=small] [class*=decrease]),
:deep(.el-input-number:hover.is-controls-right[class*=small] [class*=increase]) {
    display: inherit;
}

:deep(.el-input-number.is-controls-right .el-input-number__decrease) {
    bottom: 1px !important;
}

:deep(.breadcrumb-enter),
:deep(.breadcrumb-leave-active) {
    opacity: 0;
    transform: translateX(-100px);
}

:deep(.breadcrumb-leave-active) {
    position: relative;
}

:deep(.el-dialog .el-dialog__body) {
    padding: 5px !important;
}

:deep(.el-dialog .el-dialog__header) {
    border-bottom: 1px solid #e4e7ec;
}

:deep(.el-dialog .el-dialog__footer) {
    padding: 5px 20px 10px;
    border-top: 1px solid #e4e7ec;
}

:deep(.el-dialog .el-dialog__body .el-form-item) {
    margin-bottom: 15px
}

:deep(.cron) {
    padding-top: 50px
}

:deep(.el-form-item) {
    margin-bottom: 15px;
}

:deep(.el-input.is-disabled .el-input__inner) {
    cursor: default;
}

:deep(.el-form-item label) {
    margin-top: 2px;
}

:deep(.cron .el-form .el-form-item__error){
    right: 30px;
}
</style>
